<template>
  <view class="detail-comment-card bg-white">
    <view class="card-header ss-flex ss-col-center ss-row-between ss-p-b-30">
      <view class="ss-flex ss-col-center">
        <view class="line"></view>
        <view class="title ss-m-l-20 ss-m-r-10">我的留言</view>
        <view class="des">({{ state.total }})</view>
      </view>
    </view>
    <view class="card-content">
      <view class="comment-box ss-p-y-30" v-for="item in state.commentList" :key="item.id">
        <comment-item-user :item="item"></comment-item-user>
      </view>
      <s-empty
        v-if="state.commentList.length === 0"
        paddingTop="0"
        icon="/static/comment-empty.png"
        text="暂无留言申请"
      ></s-empty>
    </view>
  </view>
</template>

<script setup>
import {reactive, onBeforeMount, computed} from 'vue';
  import sheep from '@/sheep';
  import commentItem from './comment-item.vue';
  import CommentItemUser from "@/pages/goods/components/detail/comment-item-user.vue";
  import {onLoad, onShow} from "@dcloudio/uni-app";
  const props = defineProps({
    goodsId: {
      type: [Number, String],
      default: 0,
    },
  });
  const state = reactive({
    commentList: [],
    total: 0,
  });

	const isLogin = sheep.$store('user').isLogin;

  async function getComment(id) {

	  console.log('isLogin', isLogin)

	  if (isLogin) {
		  const { rows, total } = await sheep.$api.goods.getPlatformComments({
			  productId: id,
			  createBy: sheep.$store('user').userInfo.id,
			  pageNum: 1,
			  pageSize: 100000
		  });
		  state.commentList = rows;
		  state.total = total;
	  }
  }
	onShow(() => {
		getComment(props.goodsId)
	})
  onLoad(() => {
		getComment(props.goodsId);
	});
  onBeforeMount(() => {
    getComment(props.goodsId);
  });
</script>

<style lang="scss" scoped>
  .detail-comment-card {
    margin: 0 20rpx 20rpx 20rpx;
    padding: 20rpx 20rpx 0 20rpx;
	  margin-top: 30rpx;
	  background-color: #ffffff;
	  border-radius: 20rpx;
	  box-shadow: 1px 1px 50px #dadada;
	  /* background-image: url("https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/140bd016097a894e33a18de250f41450b2WX20250114-221159@2x.png"); */
	  background-size: 100% 20% !important;
	  background-repeat: no-repeat;

    .card-header {
      .line {
        width: 6rpx;
        height: 30rpx;
        background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
        border-radius: 3rpx;
      }

      .title {
        font-size: 30rpx;
        font-weight: bold;
        line-height: normal;
      }

      .des {
        font-size: 24rpx;
        color: $dark-9;
      }

      .more-btn {
        font-size: 24rpx;
        color: var(--ui-BG-Main);
        line-height: normal;
      }

      .cicon-forward {
        font-size: 24rpx;
        line-height: normal;
        color: var(--ui-BG-Main);
        margin-top: 4rpx;
      }
    }
  }
  .comment-box {
    border-bottom: 2rpx solid #eeeeee;
    &:last-child {
      border: none;
    }
  }
</style>
